<template>
    <div class="admin-layout">
        <AdminSidebar />
        <div class="main-content">
            <AdminHeader @logout="handleLogout" />
            <StatisticsCards :statistics="statistics" />
            
            <!-- 图表区域 -->
            <div class="charts-section">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="12">
                        <el-card class="chart-card">
                            <div ref="userTrendChart" class="chart"></div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12">
                        <el-card class="chart-card">
                            <div ref="activityPieChart" class="chart"></div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px;">
                    <el-col :span="24">
                        <el-card class="chart-card">
                            <div ref="monthlyStatsChart" class="chart"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import axios from 'axios'
import AdminSidebar from '@/components/AdminSidebar.vue'
import AdminHeader from '@/components/AdminHeader.vue'
import StatisticsCards from '@/components/StatisticsCards.vue'

const router = useRouter()
const userTrendChart = ref(null)
const activityPieChart = ref(null)
const monthlyStatsChart = ref(null)

// 统计数据
const statistics = ref({
    announcements: 24,
    carousels: 5,
    media: 0
})

// 退出登录处理
const handleLogout = () => {
    localStorage.clear()
    localStorage.removeItem('loginTable')
    router.push('/login')
}

// ... 其余 onMounted 和图表相关代码保持不变 ...
</script>

<style scoped>
.admin-layout {
    display: flex;
    min-height: 100vh;
    background-color: #f0f2f5;
}

.main-content {
    flex: 1;
    padding: 20px;
    margin-left: 260px;
}

@media screen and (max-width: 768px) {
    .main-content {
        margin-left: 64px;
    }
}

.charts-section {
    margin-top: 24px;
}

.chart-card {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.chart {
    height: 400px;
    width: 100%;
    padding: 20px;
}
</style> 